<script setup>
  import data2 from './json/data2.json';
import data3 from './json/data3.json';
import distinctCountData from './json/dataDistinctCount.json';
import option from './json/option.json';
import option2 from './json/option2.json';
import option3 from './json/option3.json';
import distinctCountOption from './json/optionDistinctCount.json';
</script>

<template>
  <div>

           <div class='row q-col-gutter-sm q-pt-sm'>
              <div class='col-sm-12 col-sm-6 col-md-6 col-lg-3'>
                <t-chart-bar :option="option2" :data="data2"  width="100%"
                height="200px"/>
              </div>
               <div class='col-sm-12 col-sm-6 col-md-6 col-lg-3'>
                <t-chart-bar :option="option2" :data="data2"  width="100%"
                height="200px"/>
              </div>
               <div class='col-sm-12 col-sm-6 col-md-6 col-lg-3'>
                <t-chart-bar :option="option2" :data="data2"  width="100%"
                height="200px"/>
              </div>
                <div class='col-sm-12 col-sm-6 col-md-6 col-lg-3'>
                <t-chart-bar :option="option2" :data="data2"  width="100%"
                height="200px"/>
              </div>
            </div>


     <div style="width: 50%;">
    <t-chart-bar
      :option="distinctCountOption"
      :data="distinctCountData"
      width="100%"
      height="200px"
    />
    </div>
    <t-chart-bar :option="option2" :data="data2"  width="100%"
      height="200px"/>
    <t-chart-bar :option="option" :visible="true"  width="100%"
      height="200px"/>
    <t-chart-bar :option="option3" :data="data3" width="100%"
      height="200px" />
  </div>
</template>
